<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>

<script lang="ts">
  import { defineComponent, PropType, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  export default defineComponent({
    name: 'CirclePointImg',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '200px',
      },
      dataList: {
        type: Array as PropType<{ name: string; value: number; color: string }[]>,
        required: true,
      },
    },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const getOption = () => {
        const line2BeginX = 30;
        const line2BeginY = 95;
        return {
          responsive: true,
          graphic: [
            {
              type: 'group',
              left: 'center', // 水平居中
              top: 'middle',
              children: [
                // 大圆（背景）
                {
                  top: 30,
                  type: 'circle',
                  shape: { r: 50 },
                  style: { fill: '#212A7C' },
                },
                // 小圆（前景）
                {
                  type: 'circle',
                  left: 10,
                  top: 10,
                  shape: { r: 25 },
                  style: { fill: '#D3CEE2' },
                },
                // "同比差异率" 文本（在小圆内居中）
                {
                  type: 'text',
                  top: 20,
                  left: 23,
                  style: {
                    text: '同比',
                    fill: '#000', // 文字颜色
                    align: 'center', // 水平居中
                    verticalAlign: 'middle', // 垂直居中
                  },
                  // 定位到小圆的中心（position + 小圆的 left/top）
                  // position: [0, 0], // 和小圆的 position 一致
                },
                {
                  type: 'text',
                  top: 35,
                  left: 18,
                  style: {
                    text: '差异率',
                    fill: '#000', // 文字颜色
                    align: 'center', // 水平居中
                    verticalAlign: 'middle', // 垂直居中
                  },
                  // 定位到小圆的中心（position + 小圆的 left/top）
                  position: [10, 10], // 和小圆的 position 一致
                },
                {
                  top: 55,
                  right: -25,
                  type: 'text',
                  style: {
                    text: '实际',
                    fill: '#fff', // 白色文字
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: 24,
                    fontWeight: 600,
                  },
                },
                {
                  top: 85,
                  right: -25,
                  type: 'text',
                  style: {
                    text: '数据',
                    fill: '#fff', // 白色文字
                    align: 'center',
                    verticalAlign: 'middle',
                    fontSize: 24,
                    fontWeight: 600,
                  },
                },
                // 其他图形（如线条、矩形等）
                {
                  type: 'rect',
                  shape: {
                    x: line2BeginX,
                    y: line2BeginY - 1,
                    width: 2,
                    height: 2,
                  },
                },
              ],
            },
          ],
        };
      };

      watchEffect(() => {
        // if (props.dataList.length > 0) {
        // }
        setOptions(getOption());
      });

      return { chartRef };
    },
  });
</script>
